<template>
  <div>
    <form>
      <input v-model="form.name" type="text">
      <br>
      <input v-model="form.age" type="text">
      <br>
      <button @click.prevent="submit">提交</button>
    </form>

    <ul>
      <li v-for="(item, index) in list">{{ item }}</li>
    </ul>
    <br>
    <button @click.prevent="add">提交</button>

    <br>
    <div>{{ obj }}</div>
    <br>
    <button @click.prevent="show">展示数据</button>

    <br>
    <div>{{ obj2 }}</div>
    <br>
    <button @click.prevent="edit">编辑数据</button>
  </div>
</template>

<script setup lang="ts">
  import {ref, reactive, readonly, shallowReactive} from 'vue'
  // ref reactive
  // ref 支持所有类型   reactive  引用类型  Array Object  Map Set
  // ref 取值 赋值 都需要加.value   reactive是不需要.value
  //                               reactive proxy 不能直接赋值  否则破坏响应式对象
  // 解决方案 数组  
  // 1.可以使用push 加解构
  // 2.添加一个对象，把数组作为一个属性去解决
  type M = {
    name: string,
    age: number
  }

  let form = reactive<M>({
    name: "小满",
    age: 28
  })

  form.age = 86

  const submit = () => {
    console.log(form)
  }


  let list = reactive<string[]>([])


  const add = () => {
    console.log(list)
    /* list.push({
      name: "徐小曼",
      age: "20"
    }) */

    setTimeout(() => {
      let res = ["EDG", "CCTV", "RGB"]
      // list = res     // 直接写会破坏数组的代理机制
      list.push({...res}) // 这种不会破坏数组的代理机制
      console.log(list)
    }, 500)
  }

  let obj = reactive({name: "小满"})

  const read = readonly(obj)

  read.name = "11111"

  const obj2:any = shallowReactive({      // 浅层响应
    foo: {
      bar: {
        num: 1
      }
    }
  })

  const show = () => {
    read.name = "大满"    // 这是无效的
    obj.name = "小满哥哥"
    console.log(read, obj)
  }

  const edit = () => {
    obj2.foo = {name: "小满哥哥"}    // 这是有效的  浅拷贝
    obj2.foo.bar.num = 1000         // 这是无效的
    console.log(obj2)
  }
  
</script>

<style scoped>

</style>